<template>
  <div id="sectorEchart" style="height: 45vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "sectorEchart",
  data() {
    return {
      chart: null,
      options: {},
      max: "", //最大value值
      min: "", // 最小value值
      type: 0
    };
  },
  created() {
    // this.getData();
  },
  mounted() {
    setTimeout(() => {
      this.initOptions();
      this.initCharts();
    }, 1000);
  },
  methods: {
    initOptions() {
      this.options = {
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false
        },
        dataset: {
          source: [
            ["product", "1月", "2月", "3月", "4月", "5月", "6月"],
            ["罚没金额趋势情况", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            // ["食品案件违法主体对比统计", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ["各片区立案数", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ["执法稽查办案情况统计", 25.2, 37.1, 41.2, 18, 33.9, 49.1]
          ]
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            emphasis: {
              focus: "self"
            },
            label: {
              formatter: "{b}: {@1月} ({d}%)"
            },
            encode: {
              itemName: "product",
              value: "1月",
              tooltip: "1月"
            }
          }
        ]
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById("sectorEchart"));
      // this.chart.on("updateAxisPointer", function(event) {
      //   const xAxisInfo = event.axesInfo[0];
      //   if (xAxisInfo) {
      //     const dimension = xAxisInfo.value + 1;
      //     this.chart.setOption({
      //       series: {
      //         id: "pie",
      //         label: {
      //           formatter: "{b}: {@[" + dimension + "]} ({d}%)"
      //         },
      //         encode: {
      //           value: dimension,
      //           tooltip: dimension
      //         }
      //       }
      //     });
      //   }
      // });
      this.chart.setOption(this.options, true);
    }
  }
};
</script>
